<template>
	<div>
		<div class="filter flex flex-y flex-between">
			<div>

			</div>
			<div>
				<el-button type="primary" size="small" @click="newClass()">新增班级</el-button>
			</div>
		</div>
		<el-table
			v-loading="loading"
			:data="formData"
			style="width: 100%">
			<el-table-column
				prop="class_id"
				label="classId">
			</el-table-column>
			<el-table-column
				prop="class_name"
				label="班级名称">
			</el-table-column>
			<el-table-column
				prop="class_number"
				label="班级人数">
			</el-table-column>
			<el-table-column
				prop="createTime"
				label="创建时间">
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import {getCurrentDate} from '@/utils/common';
export default {
	data () {
		return {
			loading:false,
			formData:[]
		}
	},
	methods:{
		newClass(){
			this.$prompt('', '请输入班级名', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			})
			.then(res=>{
				this.addClass(res.value);
			})
		},
		addClass(name){
			this.$axios.post('/class/add',{
				className:name,
				createTime:getCurrentDate()
			})
			.then(res=>{
				if(res.code == 200){
					this.list();
				}
			})
		},
		list(){
			this.loading = true;
			this.$axios.get('/class/list')
			.then(res=>{
				this.loading = false;
				if(res.code == 200){
					this.formData = res.data;
				}
			})
		}
	},
	mounted(){
		this.list();
	}
}
</script>

<style lang="scss" scoped>
	.filter{
		padding-bottom: 30px;
		label{
			color: #666;
			margin-right: 6px;
		}
	}
</style>